<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${video.video.videoName}"></title>
    <link rel="stylesheet" th:href="@{/css/custom-style.css}">
    <link rel="stylesheet" th:href="@{/webjars/bootstrap/4.1.3/css/bootstrap.min.css}">
    <script th:src="@{/webjars/jquery/3.3.1-1/jquery.min.js}"></script>
    <script th:src="@{/webjars/bootstrap/4.1.3/js/bootstrap.min.js}"></script>
</head>
<body>

<div th:replace="templates::topbar(currentPage='index')"></div>

<div class="container">
    <div class="card shadow-sm">
        <div class="card-body">
            <div class="row">
                <div class="col-sm-9">
                    <h1 th:text="${video.video.videoName}"></h1>
                </div>
                <div class="col-sm-1">
                    <a th:href="@{'/uid/' + ${video.user.userId}}">
                        <img th:src="@{${video.user.userIcon}}" class="user-medium rounded-circle">
                    </a>
                </div>
                <div class="col-sm-2">
                    <a th:href="@{'/uid/' + ${video.user.userId}}">
                        <span th:text="${video.user.userName}"></span>
                        <p th:text="${#dates.format(video.video.uploadTime, 'yyyy-MM-dd hh:mm:ss')}"></p>
                    </a>
                </div>
            </div>
            <hr>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-12 text-center">
                        <video th:src="@{${video.video.path}}" controls width="960px" height="540px"></video>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="card shadow-sm mt-4">
        <div class="card-body">
            <h3>Comments</h3>
        </div>
        <hr>
        <div class="card-body">
            <h5>Under Construction</h5>
        </div>
    </div>

</div>

</body>
</html>
